<template>
    <el-container class="wrapper">
        <!-- <el-aside :width="sideWidth" class="left-aside transition-all">aside</el-aside> -->

        <el-container class="mid-wrapper">

            <el-main class="main">
                <div class="cart-div">
                    <h2 :class="commonTitle">
                        Select your ship address
                    </h2>
                    <el-radio-group v-model="radio" @change="addNewAddressOrNot">
                        <el-radio :label="3">your</el-radio>
                        <br>
                        <el-radio :label="6">new</el-radio>
                    </el-radio-group>
                    <!-- <h2>add your address</h2> -->
                    <div v-if="showNewAddress === 'true'">
                        <!-- <div> -->
                        <el-form @submit.enter.prevent="changeAddress" :model="newOrder">
                            <el-form-item>
                                <el-input v-model="newOrder.address" :value="newAddress" />
                            </el-form-item>
                        </el-form>
                    </div>

                    <h2 :class="commonTitle">view your order</h2>

                    <el-table :data="carts" stripe style="width: 100%">
                        购买条目
                        <el-table-column prop="id" label="id" width="220" />
                        <el-table-column prop="itemId" label="Item Id" width="220" />
                        <el-table-column prop="quantity" label="Quantity" width="220" />
                        <el-table-column prop="price" label="price" width="220" />
                    </el-table><br>
                </div><br>

                <div class="detailShowed">
                    <el-button @click="detail">shown the item detail</el-button>
                </div>

                <div class="detail" v-if="showDetail === 'true'">
                    <el-table :data="carts" stripe style="width: 100%">
                        <!-- <el-table :data="tableData" stripe style="width: 100%" :key="cartItem"> -->
                        <el-table-column prop="itemId" label="itemid" width="220" />
                    </el-table><br>
                </div>

                <div class="sum">TotalPrice : {{ totalPrice }}</div>

                <div class="pay">
                    <el-button @click="pay">pay</el-button>
                </div>

                <div class="submit">
                    <el-button @click="onSubmit">commit</el-button>
                </div>




            </el-main>

            <router-link to="/viewOrder">
                <el-button @click="jump">viewOrder</el-button>
            </router-link>

            <!-- <el-footer height="120px" class="footer">Footer</el-footer> -->
        </el-container>

    </el-container>
</template>

<script>
import { ref } from "vue";
import { reactive } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus';
import router from '../router';
import { useStore } from 'vuex';
import { computed } from "@vue/reactivity";


export default {
    setup() {
        const totalPrice = computed(() => {
            return carts.reduce((total, curr) => {
                console.log(total);
                return total += curr.quantity * curr.price;
            }, 0)
        })


        const showDetail = ref("false");
        const showNewAddress = ref("false");

        const store = new useStore();
        const carts = store.state.shopCart;
        const username = store.state.userInfo.username;

        // const totalPrice = store.state.totalPrice;
        console.log(store.state.totalPrice);

        // const store = useStore();
        const address1 = store.state.userInfo.address1;
        console.log('address:' + address1);
        const newOrder = reactive({
            username: username,
            address: address1,//sessionStorage.getItem("address"),
            totalPrice: totalPrice
        });

        const radio = reactive({
            newAddress: ""
        })


        const detail = function () {
            showDetail.value = "true";
            //location.reload();
            console.log("执行了detail函数" + showDetail);
            // window.location.href="http://localhost:3000/OrderDetail"
        }

        const onSubmit = function () {
            console.log("提交订单");


            return axios.post("/order/addOrder", newOrder).then(res => {
                console.log(res.data);
                if (res.data.httpStatus == "OK") {
                    ElMessage({
                        message: res.data.message,
                        type: 'success'
                    });
                    router.push({ path: "/home" });
                } else {
                    console.log(res.data.httpStatus);
                    ElMessage({
                        message: res.data.message,
                        type: 'warning'
                    });
                }

                const h = this.$createElement;
                this.$message({
                    message: h('p', null, [
                        h('span', null, '内容可以是 '),
                        h('i', { style: 'color: teal' }, 'VNode')
                    ])
                });
                this.$message('这是一条消息提示');

            }).catch(e => {
                ElMessage.error(e.response.data)
            })
        }

        const jump = function () {
            axios({
                method: 'POST',
                url: "/order/" + sessionStorage.getItem("username") + "/viewOrder",
            }).then(Response => {
                var allOrder = new Array;
                for (var i = 0; i < Response.data.data.length; i++) {
                    allOrder.push(Response.data.data[i]);
                }
                window.sessionStorage.setItem("allOrder", JSON.stringify(allOrder));
                console.log("addOrder返回的内容为" + Response.data);
            })
        }

        const pay = function () {
            console.log("submit Buy");
            console.log(totalPrice.value);
            return axios.post("/account/alipay?outTradeNo=username2&subject=ItemList&body='5月1日'&totalAmount=" + totalPrice.value).then(res => {
                console.log(res.data);
                console.log("【支付宝返回】" + res.data);
                //这里是跳转新的页面
                document.querySelector('body').innerHTML = res;
                const div = document.createElement('div');
                div.innerHTML = res.data;
                document.body.appendChild(div);

                // _blank -- 在新窗口中打开链接
                // _parent -- 在父窗体中打开链接
                // _self -- 在当前窗体打开链接,此为默认值
                // _top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)
                document.forms[0].setAttribute('target', '_blank');// 新建窗口页面
                document.forms[0].submit();


            }).catch(function (error) {
                console.log(error)
            });
            //在此添加支付代码
        }

        const addNewAddressOrNot = function (value) {
            console.log("运行了addNewAddress，参数为" + value + ",showNewAdd");
            if (value == '6') {
                showNewAddress.value = "true";
            }
            else {
                showNewAddress.value = "false";
            }
            console.log("showNewAdd为" + showNewAddress.value);
            return;
        }

        return {
            showDetail,
            newOrder,
            username,
            carts,
            detail,
            onSubmit,
            totalPrice,
            jump,
            pay,
            addNewAddressOrNot,
            showNewAddress
        }
    }
}

</script>


<style lang="postcss" scoped>
.wrapper {
    @apply h-full w-full
}

.header {
    @apply bg-indigo-200 flex items-center justify-between
}

._menu,
.__menu {
    cursor: pointer;
    width: 40px;
    height: 40px;
}

#icon1,
#icon2 {
    width: 40px;
    height: 40px;
}


.footer {
    @apply bg-indigo-200
}

.mid-wrapper {
    @apply h-full
}

.right-aside {
    @apply h-full bg-gray-100
}

.left-aside {
    @apply h-full bg-gray-100
}

._admin {
    @apply flex ml-[900px]
}

.main {
    @apply h-full w-full
}

.sum {
    @apply ml-[650px]
}

.h2 {
    color: coral;
}
</style>
